    <template>
    <div class="hy-table">
     <div class="table-header ">
       <slot name="header">
         <div class="title">{{title}}</div>
         <div class="handler">
          <slot name="headerHandler"></slot>
         </div>
       </slot>
     </div>
              <el-table 
                  :data="listData"
                  border 
                  style="width: 100%"
                  @selection-change="handleSelectionChange"
                  v-bind="childrenProps"
             >
                 <el-table-column v-if="showSelectColumn" type="selection" align="center" width="60"></el-table-column>
                 <el-table-column v-if="showindexColumn" type="index" label="序号" align="center" width="80"></el-table-column>
                    <template v-for="propItem in propList" :key="propItem.prop">
                        <el-table-column v-bind="propItem" align="center" show-overflow-tooltip>
                            <template #default='scope'>
                                <slot :name='propItem.slotName' :row='scope.row'>
                                  {{scope.row[propItem.prop]}}
                                </slot>
                            </template>
                        </el-table-column>
                    </template>
        </el-table>

      <div  class="table-footer" v-if="showFooter">
         <slot name="footer">
             <el-pagination
                v-model:currentPage="page.currentPage"
                :page-sizes="[10, 20, 30 ]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="listCount"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              >
            </el-pagination>
         </slot>
      </div>  
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    props:{
        title:{
         type:String,
         default:''
        },
        listCount:{
         type:Number,
         default:0
        },
        listData:{
            type:Array,
            required:true
        },
        propList:{
            type:Array,
            required:true
        },
        showindexColumn:{
            type:Boolean, 
            default:false
        },
        showSelectColumn:{
            type:Boolean, 
            default:false
        },
        page:{
           type:Object,
           default:()=>({currentPage:0,pageSize:10})
        },
        childrenProps:{
           type:Object,
           default:()=>({})
        },
        showFooter:{
            type:Boolean, 
            default:true
        }
    },
    emits:['selectionchange','update:page'],
    setup (prop,{ emit }) {
        // 选中的那一行数据  子传父发出去
        const handleSelectionChange=(value:any)=>{
             emit('selectionchange',value)
        }
        const handleCurrentChange=(currenPage:number)=>{
            emit('update:page',{...prop.page},currenPage)
        }
        const handleSizeChange=(pageSize:number)=>{
           emit('update:page',{...prop.page},pageSize)
        }
        return {
            handleSelectionChange,
            handleSizeChange,
            handleCurrentChange
        }
    }
})
</script>

<style scoped lang='less'>
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  background-color: #fff;
  .title {
    font-size: 20px;
    font-weight: 700;
  }
}

.table-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 50px;
  background-color: #fff;
}
</style>